<template>
    <div class="genjing">
        <div class="gen-one" v-for="(item, index) in er" :key="index">
            <div class="gen-one-qq">
                <div class="gen-one-q">{{ item.shortName }}</div>
                <div class="gen-one-w">
                    <div class="gen-one-ww"></div>
                    <div class="gen-one-e">
                        <div class="gen-one-r"></div>
                        <div class="gen-one-rr"></div>
                        <div class="gen-one-rrr">
                            <div class="gen-two"></div>
                            <div class="gen-two-q"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gen-three" @click="getName()">
            <div class="gen-three-q">认领</div>
            <div class="gen-three-q">企业</div>
        </div>
        <div class="gen-six" v-if="aa">
            <div class="gen-six-q">
                <div class="gen-six-qqq">
                    <div class="gen-six-qq">确认跟进企业</div>
                    <div class="gen-six-qqqq"></div>
                    <div class="gen-six-qqqq"></div>
                </div>
                <div class="gen-six-w">
                    <div class="gen-six-ww">取消</div>
                    <div class="gen-six-www">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            aa: false,
            er: []
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() {
        const qwe = this.getComList()
        this.er = qwe.result.list
        const list = [1, 2, 3, 4, 8, 6, 7, 6]
        const list2 = { qw: [2, 3, 4], er: [4, 6, 6] }

        let list1 = []
        list.forEach((item, index) => {
            if (item > 4) {
                list1.push(item)
            }
        })
        console.log(list1)

        list.forEach((item, index) => {
            item = 'xao'
        })
        console.log(list)

        const list3 = [{ name: 3 }, { name: 9 }]
        list3.forEach((item, index) => {
            item.name1 = '张聪'
        })
        console.log(list3)
         
        
    },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getName() {
            this.aa = true
        },
        getComList() {
            const data = {
                result: {
                    list: [
                        {
                            id: 'b093c963-c543-4d6b-95c6-b8adbfdc5001',
                            type: '1',
                            listName: '总行公司名单2',
                            listId: 'f224e745-1043-40a4-a6b5-1e1006861611',
                            corpName: 'AEM科技（苏州）股份有限公司',
                            corpCredit: '91320000731789498M',
                            seeRang: '100',
                            clueFrom: '主动认领',
                            clueStatus: '跟进中',
                            marketingStatus: null,
                            clueDeptId: null,
                            clueDeptPath: null,
                            totalscore: 669,
                            belongChain: '电子元件制造',
                            regionName: '工业园区',
                            esdate: '2001-11-12',
                            zczb: 74201000,
                            longitude: 120.76151312150516,
                            latitude: 31.350219817535145,
                            createUser: '16161918ae8241f1bee17aea254e759c',
                            updateUser: 'dae9090cc64d4e4e979c7c9445b4c29b',
                            orderNum: 1,
                            batchId: 'ef2ede6f-5666-4b5c-913a-95c0ec61d099',
                            remark: null,
                            isDel: '0',
                            pageNum: null,
                            pageSize: null,
                            opType: null,
                            opTypeDes: null,
                            visitName: null,
                            visitContent: null,
                            visitStatus: null,
                            assignType: null,
                            assignId: null,
                            assignName: null,
                            roleType: 0,
                            deptId: null,
                            loginUserId: null,
                            clueUserName: '总行经理',
                            clueUserId: 'dae9090cc64d4e4e979c7c9445b4c29b',
                            allocateTime: '2023-12-25',
                            createTime: '2023-12-21',
                            tel: null,
                            addr: '苏州工业园区钟南街461号',
                            corpType: null,
                            corpIds: null,
                            hidCols: null,
                            labelList: [
                                { name: '在业', fontColor: '#3F9F71', backgroundColor: '#E3F2ED' },
                                { name: '电子元件制造', fontColor: '#3282E4', backgroundColor: '#E4EFFF' },
                                { name: '瞪羚', fontColor: '#9F6C3F', backgroundColor: '#F9E9DC' },
                                { name: '高新技术', fontColor: '#3282E4', backgroundColor: '#E4EFFF' },
                                { name: '专利', fontColor: '#AA7C1B', backgroundColor: '#FBF1DB' },
                                { name: '近三年涉诉', fontColor: '#C33D28', backgroundColor: '#F6E6E1' },
                            ],
                            d2CorpName: null,
                            shortName: 'AEM科',
                            d2Entstatus: '在业',
                            d2Industryco: '电子元件制造',
                            d2LegalPer: 'RICK ALAN BUSCH',
                            d2Regcap: '7420.10万元人民币',
                            d2Esdate: null,
                            d2Tel: null,
                            d2LegalPhone: null,
                            d2Dom: '苏州工业园区钟南街461号',
                            status: null,
                            isloan: null,
                            ispatent: '1',
                            issecurity: null,
                            isfund: null,
                            isgovpur: null,
                            iselec: null,
                            iswater: null,
                            istrade: null,
                            isparty: null,
                            isenviron: null,
                            ismortage: null,
                            islaw: '1',
                            istech: null,
                            isgoats: '1',
                            ishightech: '1',
                            isXw: '1',
                            isZx: '1',
                            isUnicorn: null,
                            isfrozen: null,
                            disputeNum: null,
                            punishNum: null,
                            punishSocialNum: null,
                            punishFundNum: null,
                            discreditNum: null,
                            creditRate: 'A2',
                            clIds: null,
                            techCenterName: null,
                            envLevel: null,
                            writeoffDate: null,
                            scale: null,
                            rating: null,
                            creditType: null,
                            creditGrantineType: null,
                            mpId: null,
                            numOne: null,
                            numTwo: null,
                            numThree: null,
                            keyIndustries: null,
                            countP: null,
                            countCorp: null,
                            ct: 0,
                            visitTime: '2023-12-25',
                            corporateSurveyAnswerId: null,
                            interviewSurveyAnswerId: 'ffd394d41ee64ed783a2aa00185974f9',
                            industrycoName: null,
                            clastYearQmye: '156749860.24',
                            statusStyle: { status: '跟进中', bgcolor: '#E4EFFF', color: '#3282E4' },
                            showGj: '',
                        },
                        {
                            id: 'f66a65aa-0308-4818-89ef-85db1f07f213',
                            type: '1',
                            listName: '总行公司名单2',
                            listId: 'f224e745-1043-40a4-a6b5-1e1006861611',
                            corpName: '苏州华太电子技术股份有限公司',
                            corpCredit: '91320583552457543X',
                            seeRang: '100',
                            clueFrom: '主动认领',
                            clueStatus: '无需营销',
                            marketingStatus: null,
                            clueDeptId: null,
                            clueDeptPath: null,
                            totalscore: 789,
                            belongChain: '研究和试验发展',
                            regionName: '工业园区',
                            esdate: '2010-03-16',
                            zczb: 18889040,
                            longitude: 120.7373251676824,
                            latitude: 31.268871738949816,
                            createUser: '16161918ae8241f1bee17aea254e759c',
                            updateUser: 'dae9090cc64d4e4e979c7c9445b4c29b',
                            orderNum: 3,
                            batchId: '67471b48-aee7-4126-bf0f-f81efc1a777e',
                            remark: null,
                            isDel: '0',
                            pageNum: null,
                            pageSize: null,
                            opType: null,
                            opTypeDes: null,
                            visitName: null,
                            visitContent: null,
                            visitStatus: null,
                            assignType: null,
                            assignId: null,
                            assignName: null,
                            roleType: 0,
                            deptId: null,
                            loginUserId: null,
                            clueUserName: '总行经理',
                            clueUserId: 'dae9090cc64d4e4e979c7c9445b4c29b',
                            allocateTime: '2023-12-25',
                            createTime: '2023-12-21',
                            tel: '15051569801',
                            addr: '中国（江苏）自由贸易试验区苏州片区苏州工业园区星湖街328号创意产业园10-1F',
                            corpType: null,
                            corpIds: null,
                            hidCols: null,
                            labelList: [
                                { name: '在业', fontColor: '#3F9F71', backgroundColor: '#E3F2ED' },
                                { name: '研究和试验发展', fontColor: '#3282E4', backgroundColor: '#E4EFFF' },
                                { name: '瞪羚', fontColor: '#9F6C3F', backgroundColor: '#F9E9DC' },
                                { name: '高新技术', fontColor: '#3282E4', backgroundColor: '#E4EFFF' },
                                { name: '专利', fontColor: '#AA7C1B', backgroundColor: '#FBF1DB' },
                            ],
                            d2CorpName: null,
                            shortName: '华太电子',
                            d2Entstatus: '在业',
                            d2Industryco: '研究和试验发展',
                            d2LegalPer: '张耀辉',
                            d2Regcap: '1888.90万元人民币',
                            d2Esdate: null,
                            d2Tel: null,
                            d2LegalPhone: null,
                            d2Dom: '中国（江苏）自由贸易试验区苏州片区苏州工业园区星湖街328号创意产业园10-1F',
                            status: null,
                            isloan: null,
                            ispatent: '1',
                            issecurity: null,
                            isfund: null,
                            isgovpur: null,
                            iselec: null,
                            iswater: null,
                            istrade: null,
                            isparty: null,
                            isenviron: null,
                            ismortage: null,
                            islaw: null,
                            istech: null,
                            isgoats: '1',
                            ishightech: '1',
                            isXw: '1',
                            isZx: '1',
                            isUnicorn: null,
                            isfrozen: null,
                            disputeNum: null,
                            punishNum: null,
                            punishSocialNum: null,
                            punishFundNum: null,
                            discreditNum: null,
                            creditRate: 'A1',
                            clIds: null,
                            techCenterName: null,
                            envLevel: null,
                            writeoffDate: null,
                            scale: null,
                            rating: null,
                            creditType: null,
                            creditGrantineType: null,
                            mpId: null,
                            numOne: null,
                            numTwo: null,
                            numThree: null,
                            keyIndustries: null,
                            countP: null,
                            countCorp: null,
                            ct: 0,
                            visitTime: '2023-12-26',
                            corporateSurveyAnswerId: null,
                            interviewSurveyAnswerId: '1e8457e540564282be4f3071c1d8b543',
                            industrycoName: null,
                            clastYearQmye: '842065111.59',
                            statusStyle: { status: '无需营销', bgcolor: '#E9E9E9', color: '#6B6B6B' },
                            showGj: '',
                        },
                    ],
                },
            };
            return data
        },
    }
};
</script>


<style scoped lang="scss">
.genjing {
    border: 1px solid red;
    height: 100vh;

    .gen-one {
        height: 99px;
        border: 1px solid red;

        .gen-one-qq {
            margin: 18px 0 0 12px;
            display: flex;

            .gen-one-q {
                width: 31px;
                height: 31px;
                background: #CB7E68;
                border-radius: 4px;
                font-size: 11px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 15px;
                text-align: center;
            }

            .gen-one-w {
                margin-left: 7px;

                .gen-one-ww {
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;
                    line-height: 21px;
                    border: 1px solid red;
                }

                .gen-one-e {
                    margin-top: 6px;
                    display: flex;

                    .gen-one-r {
                        width: 63px;
                        height: 19px;
                        background: #7EB993;
                        border-radius: 2px;
                        font-size: 12px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        line-height: 19px;
                    }

                    .gen-one-rr {
                        width: 75px;
                        height: 19px;
                        background: #FDE9E7;
                        border-radius: 2px;
                        font-size: 12px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 400;
                        color: #E14D3E;
                        margin-left: 7px;
                        text-align: center;
                        line-height: 19px;
                    }

                    .gen-one-rrr {
                        width: 38px;
                        height: 19px;
                        background: #FFFFFF;
                        border: 1px solid #69B993;
                        border-radius: 2px;
                        margin-left: 7px;
                        display: flex;

                        align-items: center;
                        justify-content: center;

                        .gen-two {
                            width: 12px;
                            height: 12px;
                            background: #69B993;
                        }

                        .gen-two-q {
                            width: 10px;
                            height: 7px;
                            background: #69B993;
                            margin-left: 6px;
                        }
                    }
                }
            }
        }
    }

    .gen-three {
        width: 61px;
        height: 61px;
        background: linear-gradient(45deg, rgba(96, 163, 246, 0.82), rgba(67, 151, 253, 0.82));
        box-shadow: 0px 0px 7px 0px rgba(77, 154, 250, 0.8);
        border-radius: 50%;
        margin-left: auto;
        margin-right: 19px;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .gen-three-q {
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 18px;
        }
    }

    .gen-six {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;

        .gen-six-q {
            height: 145px;
            background: #FFFFFF;
            border-radius: 4px;

            padding-left: 90px;
            padding-right: 90px;

            .gen-six-qqq {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 22px;

                .gen-six-qq {
                    font-size: 14px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #838383;
                }

                .gen-six-qqqq {
                    font-size: 14px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;
                }

            }

            .gen-six-w {
                display: flex;
                margin: 20px 15px 0 15px;

                .gen-six-ww {
                    flex: 1;
                    margin-right: 10px;
                    text-align: center;
                    height: 35px;
                    background: #FFFFFF;
                    border: 1px solid #CBCBCB;
                    border-radius: 4px;
                    font-size: 14px;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #848484;
                    text-align: center;
                    line-height: 35px;
                }

                .gen-six-www {
                    flex: 1;
                    text-align: center;
                    height: 35px;
                    height: 35px;
                    background: #4B91E7;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 35px;
                    font-size: 14px;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }

            }
        }
    }
}
</style>